<template>
  <div
    :class="prefixCls"
    class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px overflow-hidden"
  >
    <!-- 背景装饰元素 -->
    <div :class="`${prefixCls}__bg-decoration`"></div>

    <div class="relative mx-auto h-full flex z-10">
      <div
        :class="`${prefixCls}__left flex-[1.5] relative p-30px lt-xl:hidden overflow-x-hidden overflow-y-auto`"
      >
        <!-- 左上角的 logo + 系统标题 -->
        <div class="relative flex items-center text-white z-10 mb-20px">
          <span class="text-34px font-bold tracking-wide">{{ underlineToHump(appStore.getTitle) }}</span>
        </div>
        <!-- 左边的背景图 + 欢迎语 -->
        <div class="h-[calc(100%-80px)] flex items-center justify-center relative z-10">
          <TransitionGroup
            appear
            enter-active-class="animate__animated animate__bounceInLeft"
            tag="div"
            class="text-center w-full"
            style="display: flex; flex-direction: column; align-items: center;"
          >
            <img
              key="1"
              alt=""
              class="w-650px mb-30px transform transition-all duration-700 hover:scale-105"
              src="@/assets/svgs/login-box-bg.svg"
            />
            <div
              key="2"
              class="text-4xl text-white font-bold mb-15px tracking-wide"
              style="text-shadow: 0 2px 20px rgba(0,0,0,0.3);"
            >
              {{ t('login.welcome') }}
            </div>
            <div
              key="3"
              class="text-16px font-normal text-white/90 max-w-500px leading-relaxed"
              style="text-shadow: 0 1px 10px rgba(0,0,0,0.2);"
            >
              {{ t('login.message') }}
            </div>
          </TransitionGroup>
        </div>
      </div>
      <div
        :class="`${prefixCls}__right relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px overflow-x-hidden overflow-y-auto`"
      >
        <!-- 右上角的主题、语言选择 -->
        <div
          class="flex items-center justify-between at-2xl:justify-end at-xl:justify-end relative z-10"
          style="color: var(--el-text-color-primary)"
        >
          <div class="flex items-center at-2xl:hidden at-xl:hidden">
            <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
            <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
          </div>
          <div class="flex items-center justify-end space-x-10px h-48px">
            <ThemeSwitch />
            <LocaleDropdown />
          </div>
        </div>
        <!-- 右边的登录界面 -->
        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
          <div
            class="m-auto h-[calc(100%-60px)] w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
          >
            <!-- 账号登录 -->
            <LoginForm
              :class="`${prefixCls}__form-wrapper m-auto h-auto p-30px lt-xl:(rounded-3xl light:bg-white/95 backdrop-blur-xl)`"
            />
            <!-- 手机登录 -->
            <!--            <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
            <!--            &lt;!&ndash; 二维码登录 &ndash;&gt;-->
            <!--            <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
            <!--            &lt;!&ndash; 注册 &ndash;&gt;-->
            <!--            <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
            <!--            &lt;!&ndash; 三方登录 &ndash;&gt;-->
            <!--            <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />-->
            <!-- 忘记密码 -->
            <ForgetPasswordForm
              :class="`${prefixCls}__form-wrapper m-auto h-auto p-30px lt-xl:(rounded-3xl light:bg-white/95 backdrop-blur-xl)`"
            />
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { underlineToHump } from '@/utils'

import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'

import { ForgetPasswordForm, LoginForm } from './components'

defineOptions({ name: 'Login' })

const { t } = useI18n()
const appStore = useAppStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;

.#{$prefix-cls} {
  overflow: hidden;
  // 高级 #409EFF 渐变背景
  background: linear-gradient(135deg, #3f9dfe 0%, rgba(148, 189, 232, 0.9) 50%, #ecf0f3 100%);

  // 深色模式背景 - 使用 #409EFF 的深色变体
  .dark & {
    background: linear-gradient(
        135deg,
        rgba(64, 158, 255, 0.3) 0%,
        rgba(64, 158, 255, 0.4) 50%,
        rgba(64, 158, 255, 0.3) 100%
    );
  }

  // 背景装饰元素 - #409EFF 光晕
  &__bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;

    &::before,
    &::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      opacity: 0.1;
      animation: float 20s ease-in-out infinite;
    }

    &::before {
      width: 600px;
      height: 600px;
      background: linear-gradient(135deg, rgba(64, 158, 255, 0.5) 0%, rgba(64, 158, 255, 0.4) 100%);
      top: -150px;
      left: -150px;
      animation-delay: 0s;
    }

    &::after {
      width: 700px;
      height: 700px;
      background: linear-gradient(
          135deg,
          rgba(64, 158, 255, 0.4) 0%,
          rgba(135, 206, 255, 0.3) 100%
      );
      bottom: -200px;
      right: -200px;
      animation-delay: 5s;
    }
  }

  /* -----【这是本次修改的核心区域】----- */
  &__left {
    // 1. 进一步降低背景色的Alpha透明度
    background: linear-gradient(
        135deg,
        rgba(64, 158, 255, 0.15) 0%,
        rgba(64, 158, 255, 0.1) 50%,
        rgba(64, 158, 255, 0.18) 100%
    );
    // 2. 增强背景模糊效果，使之更像磨砂玻璃
    backdrop-filter: blur(25px);
    position: relative;
    // 3. 增加一个微妙的右边框来定义玻璃边缘，提升立体感
    border-right: 1px solid rgba(255, 255, 255, 0.1);

    // 深色模式同样调整
    .dark & {
      background: linear-gradient(
          135deg,
          rgba(64, 158, 255, 0.1) 0%,
          rgba(64, 158, 255, 0.08) 50%,
          rgba(64, 158, 255, 0.12) 100%
      );
      border-right: 1px solid rgba(255, 255, 255, 0.08);
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      background-image: url('@/assets/svgs/login-bg.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      // 5. 稍微提高底层SVG图案的可见度
      opacity: 0.01;
      content: '';
    }

    // 4. 优化光泽效果，模拟光线照射
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background: linear-gradient(
          to bottom right,
          rgba(255, 255, 255, 0.15) 0%,
          transparent 60%
      );
      content: '';
      pointer-events: none;
    }
  }
  /* -----【修改结束】----- */

  &__right {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    transition: all 0.3s ease;

    .dark & {
      background: var(--login-bg-color);
    }
  }

  &__form-wrapper {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.1),
      0 8px 24px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      transform: translateY(-2px);
      box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.12),
        0 12px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .dark & {
      background: rgba(41, 49, 70, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

      &:hover {
        box-shadow:
          0 24px 80px rgba(0, 0, 0, 0.4),
          0 12px 32px rgba(0, 0, 0, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }
    }
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

// 统一左右两侧回弹动画时长
.#{$prefix-cls} {
  &__left,
  &__right {
    // 统一动画时长
    :deep(.animate__animated) {
      animation-duration: 1s;
      animation-fill-mode: both;
    }
  }
}

// 响应式优化
@media (max-width: 1280px) {
  .#{$prefix-cls} {
    &__left {
      display: none;
    }

    &__right {
      background: linear-gradient(135deg, #409eff 0%, rgba(64, 158, 255, 0.9) 50%, #409eff 100%);

      .dark & {
        background: linear-gradient(
            135deg,
            rgba(64, 158, 255, 0.3) 0%,
            rgba(64, 158, 255, 0.4) 50%,
            rgba(64, 158, 255, 0.3) 100%
        );
      }
    }
  }
}
</style>

<style lang="scss">
.dark .login-form {
  .el-divider__text {
    background-color: var(--login-bg-color);
  }

  .el-card {
    background-color: var(--login-bg-color);
  }
}

// 全局登录表单样式优化
.login-form {
  .el-input__wrapper {
    transition: all 0.3s ease;
    border-radius: 12px;

    &:hover {
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    }

    &.is-focus {
      box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);
    }
  }

  .el-button--primary {
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

    &:active {
      transform: translateY(0);
    }
  }

  .el-checkbox {
    .el-checkbox__label {
      color: var(--el-text-color-regular);
      transition: color 0.3s ease;
    }

    &:hover .el-checkbox__label {
      color: var(--el-color-primary);
    }
  }

  .el-link {
    transition: all 0.3s ease;

    &:hover {
      transform: translateX(2px);
    }
  }
}

// 表单标题优化
.login-form-title {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  .dark & {
    background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}
</style>
